<template>
  <div class="page">
    <wv-group title="物品信息">
      <wv-cell title="物品重量" is-link :value="fruit.name" @click.native="fruitPickerShow = true" />
      <wv-cell title="物品载具" is-link :value="ticket | pickerValueFilter" @click.native="ticketPickerShow = true" />
      <wv-cell title="物品类型" is-link :value="type.name" @click.native="typePickerShow = true" />
    </wv-group>

    <wv-picker
      :visible.sync="fruitPickerShow"
      :columns="fruitColumns"
      value-key="name"
      @confirm="confirmPerson"
    />
    <wv-picker
      :visible.sync="typePickerShow"
      :columns="typeColumns"
      value-key="name"
      @confirm="confirmType"
    />
    <wv-picker
      :visible.sync="ticketPickerShow"
      v-model="ticket"
      :columns="ticketColumns"
      @confirm="confirmTicket"
    />
    <wv-picker
      :visible.sync="dayPickerShow"
      :columns="dayColumns"
      @confirm="confirmDayTime"
    />
    <wv-picker
      :visible.sync="addressPickerShow"
      v-model="address"
      ref="addressPicker"
      :columns="addressColumns"
      :visible-item-count="5"
      @change="onAddressChange"
      @confirm="confirmAddress"
    />
  </div>
</template>

<script>
import chinaAreaData from 'china-area-data'

const provinces = Object.values(chinaAreaData[86])

// 获取某一省下的市
const getCities = (province) => {
  let provinceCode
  for (let i in chinaAreaData[86]) {
    if (province === chinaAreaData[86][i]) {
      provinceCode = i
      break
    }
  }
  return typeof chinaAreaData[provinceCode] === 'object' ? Object.values(chinaAreaData[provinceCode]) : []
}

// 获取某一市下的区/县
function getAreas (province, city) {
  let provinceCode, cityCode
  for (let i in chinaAreaData[86]) {
    if (province === chinaAreaData[86][i]) {
      provinceCode = i
      break
    }
  }

  for (let i in chinaAreaData[provinceCode]) {
    if (city === chinaAreaData[provinceCode][i]) {
      cityCode = i
      break
    }
  }

  if (chinaAreaData[cityCode]) {
    return typeof chinaAreaData[cityCode] === 'object' ? Object.values(chinaAreaData[cityCode]) : []
  } else {
    // 只有两级的情况
    return []
  }
}

export default {
  name: 'Pick',
  data () {
    return {
      ticketValue: [],
      dayValue: [],
      fruitPickerShow: false,
      typePickerShow: false,
      ticketPickerShow: false,
      dayPickerShow: false,
      addressPickerShow: false,
      ticket: ['不限载具'],
      dayAndTime: [],
      address: [],
      fruit: [{name: 'Apple', age: 1}],
      type: [{name: 'Apple', age: 1}],
      fruitColumns: [
        {
          values: [
            {
              name: '2公斤',
              price: 1.3
            },
            {
              name: '5公斤',
              price: 2.0
            },
            {
              name: '10公斤',
              price: 10
            },
            {
              name: '100公斤',
              price: 0.5
            }
          ]
        }
      ],
      typeColumns: [
        {
          values: [
            {
              name: '文件/证件',
              price: 1.3
            },
            {
              name: '手机数码',
              price: 2.0
            },
            {
              name: '办公/居家',
              price: 10
            },
            {
              name: '蛋糕',
              price: 0.5
            },
            {
              name: '鲜花',
              price: 0.5
            },
            {
              name: '美妆护肤',
              price: 0.5
            },
            {
              name: '休闲零食',
              price: 0.5
            },
            {
              name: '生鲜果蔬',
              price: 0.5
            },
            {
              name: '海鲜水产',
              price: 0.5
            },
            {
              name: '服装配饰',
              price: 0.5
            },
            {
              name: '大件物品',
              price: 0.5
            },
            {
              name: '其他',
              price: 0.5
            }
          ]
        }
      ],
      ticketColumns: [
        {
          values: [
            '汽车',
            '飞机',
            '火车',
            '轮船',
            '其它'
          ],
          defaultIndex: 2
        }
      ],
      dayColumns: [
        {
          values: [
            '星期一',
            '星期二',
            '星期三',
            '星期四',
            '星期五',
            '星期六',
            '星期日'
          ],
          defaultIndex: 0
        },
        {
          values: [
            '上午',
            '下午'
          ],
          defaultIndex: 0
        }
      ],
      addressColumns: [
        {
          values: provinces
        },
        {
          values: getCities('湖北省')
        },
        {
          values: getAreas('湖北省', '宜昌市')
        }
      ]
    }
  },
  created () {
    this.fruit.name = this.$store.state.goodWeight
    this.type.name = this.$store.state.goodType
    this.ticket[0] = this.$store.state.goodCar
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.addressPicker.setValues(['湖北省', '宜昌市', '长阳土家族自治县'])
    })
  },

  methods: {
    onChange (picker, value) {
      console.log(value)
    },

    confirmPerson (picker) {
      this.fruit = picker.getValues()[0]
      this.$store.commit('changeWeight', this.fruit.name)
    },
    confirmType (picker) {
      this.type = picker.getValues()[0]
      this.$store.commit('changeType', this.type.name)
    },
    confirmTicket (picker) {
      this.ticket = picker.getValues()
      this.$store.commit('changeCar', this.ticket[0])
    },

    confirmDayTime (picker) {
      this.dayAndTime = picker.getValues()
    },

    onAddressChange (picker, addressValues, slotIndex) {
      if (slotIndex === 0) {
        const cities = getCities(addressValues[0])
        picker.setColumnValues(1, cities)
        picker.setColumnValues(2, getAreas(addressValues[0], cities[0]))
      } else if (slotIndex === 1) {
        picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1]))
      }
    },

    confirmAddress (picker) {
      this.address = picker.getValues()
    }
  },

  filters: {
    pickerValueFilter (val) {
      if (Array.isArray(val)) {
        return val.toString()
      } else {
        return '请选择'
      }
    }
  }
}
</script>

<style scoped lang="scss">
</style>
